<script setup>
// 1.reactive 可以接收一个对象，返回一个响应式对象
// import { reactive } from 'vue'
// const msg = reactive({
//     data: "100"
// })
// const setData = () => {
//     msg.data++
// }
// 2.ref 可以接收简单或复杂类型，返回一个响应式对象
//   1.在script访问数据需要.value
//   2.在template访问数据不需要.value
import { ref } from 'vue'
const msg = ref(100)
console.log(msg.value)
const setData = () => {
    msg.value++
}
</script>

<template>
    <div>{{ msg.data }}</div>
    <div>{{ msg }}</div>
    <button @click="setData">+1</button>
</template>